<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3d变换</title>
		<style>
			.container {
				position: fixed;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				background-color: #eee;
				perspective: 1600px;
			}

			.container ul {
				width: 500px;
				height: 500px;
				border: 1px solid #000;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				list-style: none;
				transform-style: preserve-3d;
				transform: rotateY(0deg) rotateX(0deg);
			}

			.container ul li {
				width: 200px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				background-color: #f00;
			}

			.container ul li:nth-child(1) {
				transform: translateZ(100px);
			}
			.container ul li:nth-child(2) {
				transform:rotateY(180deg) translateZ(100px);
			}
			.container ul li:nth-child(3) {
				transform: rotateY(-90deg) translateZ(100px);
			}
			.container ul li:nth-child(4) {
				transform: rotateY(90deg) translateZ(100px);
			}
			.container ul li:nth-child(5) {
				transform: rotateX(90deg) translateZ(100px);
			}
			.container ul li:nth-child(6) {
				transform: rotateX(-90deg) translateZ(100px);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<ul>
				<li>前</li>
				<li>后</li>
				<li>左</li>
				<li>右</li>
				<li>上</li>
				<li>下</li>
			</ul>
		</div>

		<!-- 
		
		 3D变换
			 perspective: 800px;  景深  为页面的元素 变换的时候 添加 近大远小的立体 视觉效果
			 perspective-origin: right top;  景深视觉基点  基于什么位置去观测这个立体空间
			transform-style: preserve-3d;   开启3D空间 让盒子每部 呈现立体效果
			backface-visibility: hidden;  背部是否可见  hidden当一个盒子旋转至背朝我们 则这个盒子不可见
		 
			绘制立体空间  三层盒子
			第一层  perspective: 800px;
			第二层  transform-style: preserve-3d;
			第三层  绘制每一个面
		 
		 -->
	</body>
</html>